<template>
  <div class="CityList2">
    <CityHeader></CityHeader>

    <CitySearch :cities="cities"></CitySearch>

    <CityLetter 
      :cities="cities" 
      @send="getSendData"
    ></CityLetter>

    <CityList 
      :cities="cities" 
      :hotCities="hotCities"
      :letter="letter"
    ></CityList>
  </div>
</template>

<script>
  import CitySearch from './components/CitySearch.vue'
  import CityHeader from './components/CityHeader.vue'
  import CityLetter from './components/CityLetter.vue'
  import CityList from './components/CityList.vue'
  import axios from 'axios'
  
  export default {
    name: "CityList2",
    components: {
      CityList,
      CityLetter,
      CityHeader,
      CitySearch
    },
    data() {
      return {
        cities: {},
        hotCities: [],
        letter: ''
      }
    },
    methods: {
      getCityInfo() {
        axios.get('/static/mock/city.json')
        .then(res => {
          if(res.data.ret && res.data) {
            this.hotCities = res.data.data.hotCities;
            this.cities = res.data.data.cities 
          }
        })
      },
      getSendData(val) {
        this.letter = val;
      }
    },
    mounted() {
      this.getCityInfo()
    }
  }
</script>

<style lang="less" scoped>
  .CityList2 {
    height: 100%;
  }
</style>